<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>KISSY gallery - Reflection</title>
<link rel="shortcut icon" href="../../../../kissy-dpl/base/assets/favicon.ico"/>
<link rel="stylesheet" href="../../../../kissy-dpl/base/assets/reset.css"/>
<link rel="stylesheet" href="../../../../kissy-dpl/base/assets/kissy-docs.css"/>
<script src="http://docs.kissyui.com/kissy/build/kissy.js"></script>
<script src="../../../../kissy-dpl/base/assets/kissy-docs.js"></script>
<script>
    KISSY.config({
        packages:[
            {
                name:"gallery",
                tag:"20111220",
                path:"../../../",  // cdn上适当修改对应路径
                charset:"utf-8"
            }
        ]
    });
</script>
<style>
    .r {
        float: left;
        display: inline;
        margin: 20px 0 20px 8px;
        width: 180px;
    }

    .section {
        overflow: hidden;
        height: 500px;
    }
</style>
</head>
<body>
<div id="header">
    <h1 class="logo"><a alt="KISSY" href="http://kissyui.com/"><img src="../../../../kissy-dpl/base/assets/logo.png"/></a></h1>
    <div class="sub-title">Gallery</div>
    <ul class="navigation">
        <li><a href="http://blog.kissyui.com/">博客</a></li>
        <li><a href="http://github.com/kissyteam">源码</a></li>
    </ul>
</div>
<div id="content">
    <div class="s-crumbs">
        <span>当前位置：</span>
        <a href="http://kissyui.com/">KISSY</a>
        <a href="../../../index.html">Gallery</a>
        <span>Reflection</span>
    </div>
            <pre class="s-section">                
作者：ruanquan.wxr@taobao.com(元泉)
功能：reflection
描述：图片倒影，基于HTML5 Canvas，支持IE
源码：<a href="reflection.js">reflection.js</a></pre>

    <h3 class="s-title">Demo</h3>
    <div class="s-section">
        <h2>demo1 通过自定义图片属性创建倒影</h2>
        <div id="demo1" class="section clearfix">
            <img src="http://img02.taobaocdn.com/bao/uploaded/i2/T1Mw1mXdRMXXaH.X6X.JPEG" class="reflect r" data-rheight=".2">
            <img src="http://img04.taobaocdn.com/bao/uploaded/i4/T1g_5bXaRyXXaH.X6X.JPEG" class="reflect r" data-ropacity="0.8">
            <img src="http://img03.taobaocdn.com/bao/uploaded/i3/T1yIGmXjNVXXaH.X6X.JPEG" class="reflect r" data-rheight=".6" data-ropacity="1">
            <img src="http://img04.taobaocdn.com/bao/uploaded/i4/T1GNqmXXlHXXaH.X6X.JPEG" class="reflect r">
            <img src="http://img03.taobaocdn.com/bao/uploaded/i3/T1Q8qiXmBrXXaH.X6X.JPEG" class="reflect r">
        </div>
        <div class="s-demo">
            <script>
                KISSY.use('gallery/reflection/1.0/reflection', function(S, Reflection) {
                    S.ready(function(S) {
                        /*当没有参数时，给所有带有reflect类的图片创建倒影，倒影的高度和透明度比例在图片自定义属性data-rheight和data-ropacity中配置*/
                        window.reflection = new Reflection();
                    });
                });
            </script>
        </div>
        <a class="s-view-code" href="demo.html#">显示源码</a>
    </div>

    <div class="s-section">
        <h2>demo2 通过配置方法参数创建倒影</h2>
        <div id="demo2" class="section clearfix" style="background:#000;">
            <a href="demo.html#"><img src="http://img02.taobaocdn.com/bao/uploaded/i2/T1Mw1mXdRMXXaH.X6X.JPEG" class="d1 r" data-rheight=".2"></a>
            <a href="demo.html#"><img src="http://img04.taobaocdn.com/bao/uploaded/i4/T1g_5bXaRyXXaH.X6X.JPEG" class="d1 r" data-ropacity="0.8"></a>
            <a href="demo.html#"><img src="http://img03.taobaocdn.com/bao/uploaded/i3/T1yIGmXjNVXXaH.X6X.JPEG" class="d1 r" data-rheight=".6" data-ropacity="1"></a>
            <a href="demo.html#"><img src="http://img04.taobaocdn.com/bao/uploaded/i4/T1GNqmXXlHXXaH.X6X.JPEG" class="d2 r"></a>
            <a href="demo.html#"><img src="http://img03.taobaocdn.com/bao/uploaded/i3/T1Q8qiXmBrXXaH.X6X.JPEG" class="d2 r"></a>
        </div>
        <div class="s-demo">
            <script>
                KISSY.use('gallery/reflection/1.0/reflection', function(S, Reflection) {
                    S.ready(function(S) {
                        /*当有一个参数时，给.demo1选择器选择的图片创建倒影，倒影的高度和透明度比例都默认为0.5*/
                        new Reflection('.d1');
                        /*当有两个参数时，给.demo2选择器选择的图片创建倒影，倒影的高度和透明度比例在第二个参数中配置*/
                        new Reflection('.d2', {'height':1,'opacity':0.9});
                    });
                });
            </script>
        </div>
        <a class="s-view-code" href="demo.html#">显示源码</a>
    </div>

    <div class="s-section">
        <h2>demo3 给动态创建的图片添加倒影</h2>
        <div id="demo3" class="section clearfix" style="background:#f60;"></div>

        <div class="s-demo">
            <script>
                KISSY.use('gallery/reflection/1.0/reflection', function(S, Reflection) {
                    S.ready(function(S) {
                        var imgs = [
                            "http://img02.taobaocdn.com/bao/uploaded/i2/T1Mw1mXdRMXXaH.X6X.JPEG",
                            "http://img04.taobaocdn.com/bao/uploaded/i4/T1g_5bXaRyXXaH.X6X.JPEG",
                            "http://img03.taobaocdn.com/bao/uploaded/i3/T1yIGmXjNVXXaH.X6X.JPEG",
                            "http://img04.taobaocdn.com/bao/uploaded/i4/T1GNqmXXlHXXaH.X6X.JPEG",
                            "http://img01.taobaocdn.com/bao/uploaded/i1/T1qJKnXexaXXaH.X6X.JPEG"
                        ];
                        var content = S.DOM.get('#demo3');
                        var img;
                        for (var i = 0; i < imgs.length; i++) {
                            img = new Image();
                            img.src = imgs[i];
                            img.className = 'b r';
                            content.appendChild(img);
                        }
                        /*等最后一个图片加载完毕再一起添加倒影*/
                        S.Event.on(img, 'load', function(e) {
                            /*demo1中有创建Reflection对象，直接拿过来使用*/
                            window.reflection.add('.b', {'height':.6,'opacity':.8});
                        });
                    });
                });
            </script>
        </div>
        <a class="s-view-code" href="demo.html#">显示源码</a>
    </div>

    <h3 class="s-title">API</h3>
    <div class="s-section">
        <h4 class="s-api-title">方法</h4>
        <div class="s-api-method">Reflection ( param1, param2 ) 构造方法</div>
        <h4 class="s-api-title">参数</h4>
        <div class="s-api-params">
            <ul class="s-list">
                <li>{String | HTMLElement} [ <em>param1</em> = '.J_ImgTarget' | images ] 需要添加倒影的图片，非必填，默认值为 '.reflect'</li>
                <li>{object} [ <em>param2</em> = {'height':0.4,'opacity':0.8} ] 倒影的高度和透明度比例，非必填，默认值为{'height':0.5,'opacity':0.5}</li>
            </ul>
        </div>
        <h4 class="s-api-title">返回</h4>
        <div class="s-api-return">null</div>
    </div>

    <div class="s-section">
        <h4 class="s-api-title">方法</h4>
        <div class="s-api-method">add ( param1, param2 ) 添加倒影</div>
        <h4 class="s-api-title">参数</h4>
        <div class="s-api-params">
            <ul class="s-list">
                <li>{String | HTMLElement} [ <em>param1</em> = '.J_ImgTarget' | images ] 需要添加倒影的图片，必填</li>
                <li>{object} [ <em>param2</em> = {'height':0.4,'opacity':0.8} ] 倒影的高度和透明度比例，非必填，默认值为{'height':0.5,'opacity':0.5}</li>
            </ul>
        </div>
        <h4 class="s-api-title">返回</h4>
        <div class="s-api-return">null</div>
    </div>

    <div class="s-section">
        <h4 class="s-api-title">方法</h4>
        <div class="s-api-method">remove ( param1) 移除倒影</div>
        <h4 class="s-api-title">参数</h4>
        <div class="s-api-params">
            <ul class="s-list">
                <li>{String | HTMLElement} [ <em>param1</em> = '.J_ImgTarget' | images ] 需要删除倒影的图片</li>
            </ul>
        </div>
        <h4 class="s-api-title">返回</h4>
        <div class="s-api-return">null</div>
    </div>

    <h3 class="s-title">Note</h3>
    <div class="s-section">
        <ul class="s-list">
            <li>注意：确保以上方法在图片加载完后执行</li>
            <li>注意：给图片设置样式时，千万不要直接作用于img标签，如：
<pre class="s-section">
img{ 
  margin:10px; 
} 
</pre>
                可以通过图片的class 或者id 来设置其样式
            </li>
        </ul>
    </div>

</div>
<div id="footer">
    &copy; Copyright 2010~2011, KISSY Team.
</div>
</body>
</html>